<!-- eslint-disable max-len -->
<!-- eslint-disable max-len -->
<template>
  <el-row class="search
                " :gutter="20">
    <el-col :span="3"></el-col>
    <el-col :span="15">
      <div class="mt-4">
        <el-input v-model="search" placeholder="请输入内容" class="input-with-select"></el-input>
      </div>
    </el-col>
    <el-col :span="3">
      <el-button type="primary">点击搜索</el-button>
    </el-col>
    <el-col :span="3"></el-col>
  </el-row>
  <!-- 对数据进行截取 是当前页数-1 乘以 显示条数     当前页数乘以显示条数 -->
  <el-table :data="
    filterTableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)
  " style="width: 100%">
    <el-table-column label="订单ID" prop="id" />
    <el-table-column label="用户名" prop="name" />
    <el-table-column label="电影名" prop="film" />
    <el-table-column label="影院名" prop="cinema" />
    <el-table-column label="票数" prop="number" />
    <el-table-column label="总价" prop="prices" />
    <el-table-column label="取票码" prop="ticket" />
    <el-table-column label="下单时间" prop="time" />
    <el-table-column align="right" label="操作">
      <template #default="scope">
        <el-button size="small" type="danger" @click="handleDelete(scope.row)">撤销</el-button>
      </template>
    </el-table-column>
    <!-- 添加输入框 -->
  </el-table>
  <!-- 设置导航 -->
  <!-- 修改下面得属性 -->
  <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
    :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
    :total="filterTableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
<script lang="ts" setup>
import link from '@/api/link';
import http from '@/util/api';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, computed, onMounted } from 'vue';

interface User {
  name: string,
  film: string,
  cinema: string,
  number: number,
  prices: number,
  ticket: number,
  time: string,
}

// 表格数据
const list = ref([]);

onMounted(() => {
  // eslint-disable-next-line no-use-before-define
  getlist();
});

const getlist = () => {
  link('/orderlist').then((res: any) => {
    list.value = res.data;
    // console.log(list.value)
  });
};

// 设置需要的参数与方法
const currentPage4 = ref(1);
const pageSize4 = ref(10);
// 搜索输入框
const search = ref('');
// 使用计算属性处理数据
// eslint-disable-next-line max-len
const filterTableData = computed(() => list.value.filter((item: any) => item.film.toLowerCase().includes(search.value.toLowerCase())));
// 当前页数
const currentPage = ref(1);
// 每页显示个数
const pageSize = ref(10);
// 是否使用小型分页样式
const small = ref(true);
// 是否禁用分页
const disabled = ref(false);
// 是否为分页按钮添加背景色
const background = ref(false);
// 修改下面得方法
const handleSizeChange = (val: number) => {
  // 一页显示多少条
  pageSize4.value = val;
};
const handleCurrentChange = (val: number) => {
  // 页码更改方法
  currentPage4.value = val;
};

// 删除信息
const handleDelete = (row: any) => {
  console.log(row);

  ElMessageBox.confirm(
    '确认删除该信息吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      http(`/orderlist/${row.id}`, 'delete').then((res: { status: number; }) => {
        if (res.status === 200) {
          ElMessage({
            type: 'success',
            message: '删除成功！',
          });
          getlist();
        } else {
          ElMessage({
            type: 'error',
            message: '删除失败！',
          });
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消！',
      });
    });
};
// const tableData: any = [
//   {
//     name: "",
//     film: "",
//     cinema: "",
//     number: "",
//     prices: "",
//     ticket: "",
//     time: "",
//   },
// ];
</script>
<style scoped lang="scss">
.search {
  margin-bottom: 50px;
}
</style>
